<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>
        header a{
            text-decoration: none;
            color: black;

        }
        body{
            font: 12px "simhei", Arial, Helvetica, sans-serif;

        }
        .c1{
            width: 1200px;
            border:0px solid #666666;
            margin: 0 auto;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 12);
        }

        .grid-content {
            width: 390px;
            height: 170px;
            border-radius: 2px;
            min-height: 36px;
        }
.e1>p{
    font-size: 25px;
}

    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-header height="150px">
            <div style="width: 1200px;margin: 0 auto">
                <img src="imgs/logo.jpeg" style="width: 300px;vertical-align: middle" alt="">
                <a href="/">首页</a><el-divider direction="vertical"></el-divider>
                <a href="">商城</a><el-divider direction="vertical"></el-divider>
                <a href="">求购商城</a><el-divider direction="vertical"></el-divider>
                <a href="">反馈与意见</a><el-divider direction="vertical"></el-divider>

            </div>
            <!--导航菜单开始-->
            <div style="background-color: #8321e5">
                <el-menu style="width: 1200px;margin: 0 auto"
                    :default-active="activeIndex"
                    class="el-menu-demo"
                    mode="horizontal"
                    @select="handleSelect"
                    background-color="#8321e5"
                    text-color="#fff"
                    active-text-color="#fff">
                <el-menu-item v-for="c in categoryArr"  :index="c.id">{{c.name}}</el-menu-item>

                    <div style="float: right;position: relative;top: 10px;">
                        <el-input style="background-color: #8321e5" placeholder="请输入搜索内容" v-model="wd">
                            <el-button slot="append" icon="el-icon-search" @click="search()"></el-button>
                        </el-input>
                    </div>
            </el-menu>
            </div>
            <!--导航菜单结束-->

        </el-header>
        <el-main style="width: 1200px;margin: 0 auto">
            <el-row gutter="20">
                <el-col span="12">
                    <el-card>
                        <img src="imgs/a.JPG" width="100%" alt="">
                    </el-card>
                </el-col>
                <el-col span="12" class="e1">
                    <span style="color:#666;font-size: 12px">发布于2022.10.20</span>
                    <p style="font-size: 15px;color: #666">
                        浏览量:200</p>
                    <p >商品名:帕加尼风神</p>
                    <p >价格:￥40000000<span style="font-size: 15px;color: #666">
                        原价:<s>30000000</s></span>
                    </p>
                    <p>成色:全新</p>
                    <p>数量:1</p>
                    <p>分类:汽车</p>
                    <el-divider></el-divider>
                    <el-row>
                        <el-button type="success" round>购买</el-button>
                        <el-button type="success" round>加入购物车</el-button>
                        <el-button type="success" round>收藏</el-button>
                    </el-row>

                </el-col>
            </el-row>
        </el-main>
        <el-footer>
            <div class="c1" >
            <el-row style="width: 1200px;height:200px;margin: 0 auto;">
                <el-col :span="8">
                    <div class="grid-content bg-purple">
                    <div id="t_l_div" >
                        <div style="margin-left: 100px;">
                            <p style="font-size: 30px;color: black;font-weight: bold">关于我们</p>
                            <p>该网站成立与2017年，是仲恺农业工程<br>
                                学院最大的校内二手交易网站。拥有<br>
                                2000万注册用户和10万注册企业和合<br>
                                作伙伴。日常在线活动用户约90万。<br>
                                交易金额最大可达1亿/日。</p>
                        </div>
                    </div>
                </div></el-col>
                <el-col :span="8"><div class="grid-content bg-purple-light">
                    <div id="t_r_div">
                        <div style="margin-left: 100px;">
                            <p style="font-size: 30px;color: black;font-weight: bold">团队信息</p>
                            <p >该网站由WSK和XYF协力完成。有入职<br>
                                意向的求职者可以主动向WSK提交求职<br>
                                简介，并将求职简介发送。</p>
                        </div>
                    </div>
                </div>
                </el-col>
                <el-col :span="8"><div class="grid-content bg-purple">
                    <div id="t_c_div">
                        <div style="margin-left: 100px;">
                            <p style="font-size: 30px;color: black;font-weight: bold">版权声明</p>
                            <p>本网站社区发布的所有信息，都视为发布<br>
                                者同意本网站免费予以使用;同时本网站<br>
                                认为其发布的信息有侵权、 违法等行为<br>
                                的，有权予以修改、删除或通知发布者予<br>
                                以纠正的权利，发布者不得阻止或拒绝。</p>
                        </div>
                    </div>
                </div>
                </el-col>
            </el-row>
            </div>
            <div style="background-color: #8321e5;padding:30px 0;text-align: center;color: white">
                <p style="font-size: 20px">Copyright © 2017.Company name All rights reserved.</p>
            </div>

        </el-footer>
    </el-container>
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>

<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
   let v = new Vue({
        el: '#app',
        data: function() {
            return {
                activeIndex:"",
                wd:"",
                categoryArr:[],
                p:{}
            }
        },
       methods: {
           handleSelect(key,keyPath){
               console.log(key,keyPath);
               location.href="/result.html?id="+key;
           },
           search(){
               location.href="/result.html?wd="+v.wd;
           }
       },
       created:function () {
           axios.get("/category/select").then(function (response) {
               v.categoryArr = response.data;
           })
           axios.get("/product/selectById/detail"+location.search).then(function (response) {
               v.p = response.data;
           })
       }
   })
</script>
</html>
